<html lang="zh-CN"><head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>花想容 - 植物爱好者的天堂</title>
  <!-- 引入Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- 引入Font Awesome -->
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <!-- 引入Chart.js -->
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
  <!-- 引入Google Fonts -->
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&amp;display=swap" rel="stylesheet">
  
  <!-- Tailwind CSS 配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#4CAF50', // 绿色作为主色调，象征植物和自然
            secondary: '#FF9800', // 橙色作为辅助色，代表活力和温暖
            accent: '#9C27B0', // 紫色作为强调色，增添优雅感
            dark: '#2E7D32', // 深绿色用于强调和按钮
            light: '#E8F5E9', // 浅绿色用于背景和卡片
          },
          fontFamily: {
            inter: ['Inter', 'sans-serif'],
          },
        },
      }
    }
  </script>
  
  <!-- 自定义工具类 -->
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .text-shadow {
        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
      }
      .bg-gradient-plant {
        background: linear-gradient(120deg, #4CAF50, #8BC34A);
      }
      .hover-scale {
        transition: transform 0.3s ease;
      }
      .hover-scale:hover {
        transform: scale(1.03);
      }
      .card-shadow {
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
      }
    }
  </style>
  
  <style>
    /* 基础动画效果 */
    .fade-in {
      animation: fadeIn 0.5s ease-in-out;
    }
    
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    /* 滚动条美化 */
    ::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }
    
    ::-webkit-scrollbar-track {
      background: #f1f1f1;
    }
    
    ::-webkit-scrollbar-thumb {
      background: #4CAF50;
      border-radius: 4px;
    }
    
    ::-webkit-scrollbar-thumb:hover {
      background: #2E7D32;
    }
    
    /* 平滑滚动 */
    html {
      scroll-behavior: smooth;
    }
  </style>
</head>

<body class="font-inter bg-gray-50 text-gray-800 min-h-screen flex flex-col">
  <!-- 导航栏 -->
  <header id="navbar" class="fixed w-full z-50 transition-all duration-300">
    <div class="bg-white/90 backdrop-blur-sm shadow-sm">
      <div class="container mx-auto px-4 py-3 flex items-center justify-between">
        <!-- Logo -->
        <a href="#" class="flex items-center space-x-2">
          <div class="w-10 h-10 rounded-full bg-gradient-plant flex items-center justify-center">
            <i class="fa fa-leaf text-white text-xl"></i>
          </div>
          <span class="text-xl font-bold text-primary">花想容</span>
        </a>
        
        <!-- 导航链接 - 桌面版 -->
        <nav class="hidden md:flex items-center space-x-8">
          <a href="#home" class="text-primary font-medium hover:text-dark transition-colors">首页</a>
          <a href="#plant-identify" class="text-gray-600 font-medium hover:text-primary transition-colors">植物识别</a>
          <a href="#encyclopedia" class="text-gray-600 font-medium hover:text-primary transition-colors">植物百科</a>
          <a href="#ai-simulation" class="text-gray-600 font-medium hover:text-primary transition-colors">AI模拟</a>
          <a href="#forum" class="text-gray-600 font-medium hover:text-primary transition-colors">交流论坛</a>
          <a href="#shop" class="text-gray-600 font-medium hover:text-primary transition-colors">植物商城</a>
        </nav>
        
        <!-- 用户操作区 -->
        <div class="flex items-center space-x-4">
          <button class="hidden md:block px-4 py-2 bg-primary text-white rounded-full hover:bg-dark transition-colors">
            <i class="fa fa-search mr-2"></i>搜索植物
          </button>
          <button class="md:hidden text-gray-600 hover:text-primary">
            <i class="fa fa-search text-xl"></i>
          </button>
          <button class="relative text-gray-600 hover:text-primary">
            <i class="fa fa-bell text-xl"></i>
            <span class="absolute -top-1 -right-1 w-4 h-4 bg-secondary rounded-full text-xs flex items-center justify-center text-white">3</span>
          </button>
          <button class="md:hidden text-gray-600 hover:text-primary" id="mobile-menu-button">
            <i class="fa fa-bars text-xl"></i>
          </button>
          <button class="hidden md:flex items-center space-x-2 px-4 py-2 bg-primary/10 text-primary rounded-full hover:bg-primary/20 transition-colors">
            <img src="https://picsum.photos/id/64/40/40" alt="用户头像" class="w-8 h-8 rounded-full object-cover border-2 border-primary">
            <span>登录/注册</span>
          </button>
        </div>
      </div>
    </div>
    
    <!-- 移动端菜单 -->
    <div id="mobile-menu" class="md:hidden hidden bg-white shadow-lg absolute w-full">
      <div class="container mx-auto px-4 py-3 flex flex-col space-y-3">
        <a href="#home" class="text-primary font-medium py-2 border-b border-gray-100">首页</a>
        <a href="#plant-identify" class="text-gray-600 font-medium py-2 border-b border-gray-100">植物识别</a>
        <a href="#encyclopedia" class="text-gray-600 font-medium py-2 border-b border-gray-100">植物百科</a>
        <a href="#ai-simulation" class="text-gray-600 font-medium py-2 border-b border-gray-100">AI模拟</a>
        <a href="#forum" class="text-gray-600 font-medium py-2 border-b border-gray-100">交流论坛</a>
        <a href="#shop" class="text-gray-600 font-medium py-2">植物商城</a>
        <div class="flex items-center space-x-2 py-2">
          <img src="https://picsum.photos/id/64/40/40" alt="用户头像" class="w-8 h-8 rounded-full object-cover border-2 border-primary">
          <span class="font-medium">登录/注册</span>
        </div>
      </div>
    </div>
  </header>

  <main class="flex-grow">
    <!-- 英雄区域 -->
    <section id="home" class="relative pt-24 pb-16 md:pt-32 md:pb-24 overflow-hidden">
      <div class="absolute inset-0 bg-gradient-to-br from-primary/5 to-accent/5 -z-10"></div>
      <div class="absolute right-0 top-0 w-1/2 h-full bg-contain bg-no-repeat bg-right opacity-10" style="background-image: url('https://picsum.photos/id/152/800/800');"></div>
      
      <div class="container mx-auto px-4">
        <div class="flex flex-col md:flex-row items-center">
          <div class="md:w-1/2 fade-in">
            <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold leading-tight text-gray-800 mb-4">
              探索植物世界的<br><span class="text-primary">奇妙旅程</span>
            </h1>
            <p class="text-lg md:text-xl text-gray-600 mb-8 max-w-lg">
              花想容是您探索植物世界的最佳伙伴，提供专业的植物识别、百科知识、AI模拟和社交交流功能。
            </p>
            <div class="flex flex-wrap gap-4">
              <button class="px-8 py-3 bg-primary text-white rounded-full hover:bg-dark transition-all shadow-lg hover:shadow-xl hover:-translate-y-1">
                <i class="fa fa-camera mr-2"></i>开始识别植物
              </button>
              <button class="px-8 py-3 bg-white text-primary border border-primary rounded-full hover:bg-primary/5 transition-all shadow-md hover:shadow-lg hover:-translate-y-1">
                <i class="fa fa-book mr-2"></i>浏览植物百科
              </button>
            </div>
            <div class="mt-10 flex items-center space-x-6">
              <div class="flex -space-x-2">
                <img src="https://picsum.photos/id/64/40/40" alt="用户头像" class="w-10 h-10 rounded-full border-2 border-white">
                <img src="https://picsum.photos/id/65/40/40" alt="用户头像" class="w-10 h-10 rounded-full border-2 border-white">
                <img src="https://picsum.photos/id/66/40/40" alt="用户头像" class="w-10 h-10 rounded-full border-2 border-white">
                <img src="https://picsum.photos/id/67/40/40" alt="用户头像" class="w-10 h-10 rounded-full border-2 border-white">
                <div class="w-10 h-10 rounded-full border-2 border-white bg-primary/10 flex items-center justify-center text-primary text-xs font-medium">
                  +2k
                </div>
              </div>
              <p class="text-gray-600">
                <span class="font-bold text-primary">20,000+</span> 植物爱好者的共同选择
              </p>
            </div>
          </div>
          <div class="md:w-1/2 mt-12 md:mt-0 fade-in" style="animation-delay: 0.2s;">
            <div class="relative">
              <div class="absolute -top-6 -left-6 w-24 h-24 bg-secondary/20 rounded-full blur-2xl"></div>
              <div class="absolute -bottom-8 -right-8 w-32 h-32 bg-primary/20 rounded-full blur-3xl"></div>
              <img src="https://picsum.photos/id/152/600/600" alt="植物展示" class="w-full h-auto rounded-2xl shadow-2xl hover-scale">
              <div class="absolute -bottom-5 -left-5 bg-white p-4 rounded-xl shadow-lg card-shadow hover-scale">
                <div class="flex items-center space-x-3">
                  <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                    <i class="fa fa-leaf text-xl"></i>
                  </div>
                  <div>
                    <p class="text-sm text-gray-500">今日识别植物</p>
                    <p class="text-xl font-bold text-gray-800">1,284</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 功能卡片区域 -->
    <section class="py-16 bg-white">
      <div class="container mx-auto px-4">
        <div class="text-center mb-16">
          <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-gray-800 mb-4">
            探索我们的<span class="text-primary">核心功能</span>
          </h2>
          <p class="text-gray-600 max-w-2xl mx-auto">
            花想容提供一系列强大功能，帮助您深入了解植物世界，分享您的植物养护经验，发现更多植物之美。
          </p>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
          <!-- 功能卡片1 -->
          <div class="bg-light rounded-2xl p-8 hover-scale card-shadow transition-all">
            <div class="w-16 h-16 rounded-xl bg-primary/10 flex items-center justify-center text-primary mb-6">
              <i class="fa fa-camera text-2xl"></i>
            </div>
            <h3 class="text-xl font-bold text-gray-800 mb-3">智能植物识别</h3>
            <p class="text-gray-600 mb-6">
              上传植物照片，AI系统将在秒级时间内识别出植物种类，提供详细信息和养护建议。
            </p>
            <a href="#plant-identify" class="inline-flex items-center text-primary font-medium hover:text-dark transition-colors">
              了解更多 <i class="fa fa-arrow-right ml-2"></i>
            </a>
          </div>
          
          <!-- 功能卡片2 -->
          <div class="bg-light rounded-2xl p-8 hover-scale card-shadow transition-all">
            <div class="w-16 h-16 rounded-xl bg-secondary/10 flex items-center justify-center text-secondary mb-6">
              <i class="fa fa-book text-2xl"></i>
            </div>
            <h3 class="text-xl font-bold text-gray-800 mb-3">植物百科全书</h3>
            <p class="text-gray-600 mb-6">
              收录全球最新植物信息，包括分类、特征、分布、用途等详细资料，持续更新中。
            </p>
            <a href="#encyclopedia" class="inline-flex items-center text-secondary font-medium hover:text-dark transition-colors">
              了解更多 <i class="fa fa-arrow-right ml-2"></i>
            </a>
          </div>
          
          <!-- 功能卡片3 -->
          <div class="bg-light rounded-2xl p-8 hover-scale card-shadow transition-all">
            <div class="w-16 h-16 rounded-xl bg-accent/10 flex items-center justify-center text-accent mb-6">
              <i class="fa fa-magic text-2xl"></i>
            </div>
            <h3 class="text-xl font-bold text-gray-800 mb-3">AI植物模拟</h3>
            <p class="text-gray-600 mb-6">
              基于环境参数和植物特性，AI系统可以模拟植物生长状态，预测未来发展趋势。
            </p>
            <a href="#ai-simulation" class="inline-flex items-center text-accent font-medium hover:text-dark transition-colors">
              了解更多 <i class="fa fa-arrow-right ml-2"></i>
            </a>
          </div>
          
          <!-- 功能卡片4 -->
          <div class="bg-light rounded-2xl p-8 hover-scale card-shadow transition-all">
            <div class="w-16 h-16 rounded-xl bg-dark/10 flex items-center justify-center text-dark mb-6">
              <i class="fa fa-users text-2xl"></i>
            </div>
            <h3 class="text-xl font-bold text-gray-800 mb-3">植物爱好者社区</h3>
            <p class="text-gray-600 mb-6">
              与全球植物爱好者交流经验，分享养护心得，参与讨论，解决植物问题。
            </p>
            <a href="#forum" class="inline-flex items-center text-dark font-medium hover:text-primary transition-colors">
              了解更多 <i class="fa fa-arrow-right ml-2"></i>
            </a>
          </div>
        </div>
      </div>
    </section>

    <!-- 植物识别区域 -->
    <section id="plant-identify" class="py-16 bg-gray-50">
      <div class="container mx-auto px-4">
        <div class="flex flex-col lg:flex-row items-center gap-12">
          <div class="lg:w-1/2 fade-in">
            <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-gray-800 mb-6">
              一键识别，<span class="text-primary">探索植物奥秘</span>
            </h2>
            <p class="text-gray-600 mb-8">
              花想容的智能植物识别系统基于深度学习技术，拥有超过10,000种植物的数据库，识别准确率高达98%，让您随时随地了解身边植物的信息。
            </p>
            
            <div class="space-y-6 mb-8">
              <div class="flex items-start space-x-4">
                <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary flex-shrink-0 mt-1">
                  <i class="fa fa-check"></i>
                </div>
                <div>
                  <h4 class="text-lg font-semibold text-gray-800 mb-2">秒级识别</h4>
                  <p class="text-gray-600">上传照片后，系统将在几秒钟内给出识别结果，无需长时间等待。</p>
                </div>
              </div>
              
              <div class="flex items-start space-x-4">
                <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary flex-shrink-0 mt-1">
                  <i class="fa fa-check"></i>
                </div>
                <div>
                  <h4 class="text-lg font-semibold text-gray-800 mb-2">详细信息</h4>
                  <p class="text-gray-600">识别结果包含植物学名、别名、分类、特征、分布区域、养护要点等详细信息。</p>
                </div>
              </div>
              
              <div class="flex items-start space-x-4">
                <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary flex-shrink-0 mt-1">
                  <i class="fa fa-check"></i>
                </div>
                <div>
                  <h4 class="text-lg font-semibold text-gray-800 mb-2">养护建议</h4>
                  <p class="text-gray-600">根据植物特性和您所在地区的气候条件，提供个性化的养护建议和注意事项。</p>
                </div>
              </div>
            </div>
            
            <button class="px-8 py-3 bg-primary text-white rounded-full hover:bg-dark transition-all shadow-lg hover:shadow-xl hover:-translate-y-1">
              <i class="fa fa-camera mr-2"></i>立即识别植物
            </button>
          </div>
          
          <div class="lg:w-1/2 fade-in" style="animation-delay: 0.2s;">
            <div class="bg-white rounded-2xl p-6 shadow-xl relative">
              <div class="absolute -top-4 -right-4 bg-secondary text-white px-4 py-2 rounded-full text-sm font-medium shadow-lg">
                新功能
              </div>
              
              <div class="border-2 border-dashed border-gray-300 rounded-xl p-8 text-center mb-6">
                <div class="w-20 h-20 mx-auto bg-primary/10 rounded-full flex items-center justify-center text-primary mb-4">
                  <i class="fa fa-cloud-upload text-3xl"></i>
                </div>
                <h3 class="text-lg font-semibold text-gray-800 mb-2">上传植物照片</h3>
                <p class="text-gray-500 mb-6">
                  选择一张清晰的植物照片，确保包含叶片、花朵或果实等特征部分
                </p>
                <button class="px-6 py-2 bg-primary/10 text-primary rounded-lg hover:bg-primary/20 transition-colors">
                  <i class="fa fa-file-image-o mr-2"></i>从相册选择
                </button>
                <p class="text-xs text-gray-400 mt-4">
                  支持 JPG、PNG 格式，文件大小不超过 5MB
                </p>
              </div>
              
              <div class="mb-6">
                <h3 class="text-lg font-semibold text-gray-800 mb-3">或直接拍摄</h3>
                <div class="grid grid-cols-3 gap-4">
                  <button class="flex flex-col items-center justify-center p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors">
                    <i class="fa fa-camera text-xl text-gray-500 mb-2"></i>
                    <span class="text-sm text-gray-600">相机拍摄</span>
                  </button>
                  <button class="flex flex-col items-center justify-center p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors">
                    <i class="fa fa-image text-xl text-gray-500 mb-2"></i>
                    <span class="text-sm text-gray-600">相册选择</span>
                  </button>
                  <button class="flex flex-col items-center justify-center p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors">
                    <i class="fa fa-history text-xl text-gray-500 mb-2"></i>
                    <span class="text-sm text-gray-600">历史记录</span>
                  </button>
                </div>
              </div>
              
              <div class="bg-gray-50 rounded-xl p-4">
                <h3 class="text-lg font-semibold text-gray-800 mb-3">识别示例</h3>
                <div class="grid grid-cols-2 gap-4">
                  <div class="bg-white rounded-lg overflow-hidden shadow-md hover-scale">
                    <img src="https://picsum.photos/id/106/300/200" alt="植物示例" class="w-full h-24 object-cover">
                    <div class="p-3">
                      <p class="text-sm font-medium text-gray-800">绿萝</p>
                      <p class="text-xs text-gray-500">识别准确率: 99%</p>
                    </div>
                  </div>
                  <div class="bg-white rounded-lg overflow-hidden shadow-md hover-scale">
                    <img src="https://picsum.photos/id/110/300/200" alt="植物示例" class="w-full h-24 object-cover">
                    <div class="p-3">
                      <p class="text-sm font-medium text-gray-800">多肉植物</p>
                      <p class="text-xs text-gray-500">识别准确率: 97%</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 植物百科区域 -->
    <section id="encyclopedia" class="py-16 bg-white">
      <div class="container mx-auto px-4">
        <div class="text-center mb-16">
          <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-gray-800 mb-4">
            探索<span class="text-primary">植物百科全书</span>
          </h2>
          <p class="text-gray-600 max-w-2xl mx-auto">
            花想容收录了全球最新的植物信息，从常见的室内植物到珍稀的野生品种，为您提供全面而深入的植物知识。
          </p>
        </div>
        
        <!-- 分类筛选 -->
        <div class="flex flex-wrap justify-center gap-3 mb-10">
          <button class="px-5 py-2 bg-primary text-white rounded-full shadow-md">全部植物</button>
          <button class="px-5 py-2 bg-gray-100 text-gray-600 rounded-full hover:bg-gray-200 transition-colors">室内植物</button>
          <button class="px-5 py-2 bg-gray-100 text-gray-600 rounded-full hover:bg-gray-200 transition-colors">观花植物</button>
          <button class="px-5 py-2 bg-gray-100 text-gray-600 rounded-full hover:bg-gray-200 transition-colors">多肉植物</button>
          <button class="px-5 py-2 bg-gray-100 text-gray-600 rounded-full hover:bg-gray-200 transition-colors">香草植物</button>
          <button class="px-5 py-2 bg-gray-100 text-gray-600 rounded-full hover:bg-gray-200 transition-colors">水生植物</button>
          <button class="px-5 py-2 bg-gray-100 text-gray-600 rounded-full hover:bg-gray-200 transition-colors">珍稀植物</button>
        </div>
        
        <!-- 植物卡片网格 -->
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
          <!-- 植物卡片1 -->
          <div class="bg-white rounded-xl overflow-hidden shadow-lg hover-scale card-shadow">
            <div class="relative">
              <img src="https://picsum.photos/id/106/400/300" alt="绿萝" class="w-full h-48 object-cover">
              <div class="absolute top-3 right-3 bg-primary/90 text-white px-2 py-1 rounded-md text-sm font-medium">
                室内植物
              </div>
            </div>
            <div class="p-5">
              <div class="flex justify-between items-start mb-3">
                <h3 class="text-xl font-bold text-gray-800">绿萝</h3>
                <div class="flex items-center">
                  <i class="fa fa-star text-yellow-400"></i>
                  <span class="ml-1 text-gray-600">4.8</span>
                </div>
              </div>
              <p class="text-sm text-gray-600 mb-4">
                绿萝（学名：Epipremnum aureum），又称黄金葛，是一种常见的室内观叶植物，具有净化空气的功能。
              </p>
              <div class="flex justify-between items-center">
                <div class="flex items-center">
                  <span class="text-xs text-gray-500 mr-2">难度：</span>
                  <div class="flex">
                    <i class="fa fa-circle text-green-500 text-xs"></i>
                    <i class="fa fa-circle text-green-500 text-xs"></i>
                    <i class="fa fa-circle text-gray-300 text-xs"></i>
                    <i class="fa fa-circle text-gray-300 text-xs"></i>
                    <i class="fa fa-circle text-gray-300 text-xs"></i>
                  </div>
                </div>
                <button class="text-primary hover:text-dark transition-colors">
                  <i class="fa fa-bookmark-o"></i>
                </button>
              </div>
            </div>
          </div>
          
          <!-- 植物卡片2 -->
          <div class="bg-white rounded-xl overflow-hidden shadow-lg hover-scale card-shadow">
            <div class="relative">
              <img src="https://picsum.photos/id/110/400/300" alt="多肉植物" class="w-full h-48 object-cover">
              <div class="absolute top-3 right-3 bg-secondary/90 text-white px-2 py-1 rounded-md text-sm font-medium">
                多肉植物
              </div>
            </div>
            <div class="p-5">
              <div class="flex justify-between items-start mb-3">
                <h3 class="text-xl font-bold text-gray-800">多肉植物</h3>
                <div class="flex items-center">
                  <i class="fa fa-star text-yellow-400"></i>
                  <span class="ml-1 text-gray-600">4.7</span>
                </div>
              </div>
              <p class="text-sm text-gray-600 mb-4">
                多肉植物（学名：Succulent plant）是一类具有肉质组织的植物，能够储存水分，适应干旱环境。
              </p>
              <div class="flex justify-between items-center">
                <div class="flex items-center">
                  <span class="text-xs text-gray-500 mr-2">难度：</span>
                  <div class="flex">
                    <i class="fa fa-circle text-green-500 text-xs"></i>
                    <i class="fa fa-circle text-green-500 text-xs"></i>
                    <i class="fa fa-circle text-green-500 text-xs"></i>
                    <i class="fa fa-circle text-gray-300 text-xs"></i>
                    <i class="fa fa-circle text-gray-300 text-xs"></i>
                  </div>
                </div>
                <button class="text-primary hover:text-dark transition-colors">
                  <i class="fa fa-bookmark-o"></i>
                </button>
              </div>
            </div>
          </div>
          
          <!-- 植物卡片3 -->
          <div class="bg-white rounded-xl overflow-hidden shadow-lg hover-scale card-shadow">
            <div class="relative">
              <img src="https://picsum.photos/id/111/400/300" alt="兰花" class="w-full h-48 object-cover">
              <div class="absolute top-3 right-3 bg-accent/90 text-white px-2 py-1 rounded-md text-sm font-medium">
                观花植物
              </div>
            </div>
            <div class="p-5">
              <div class="flex justify-between items-start mb-3">
                <h3 class="text-xl font-bold text-gray-800">蝴蝶兰</h3>
                <div class="flex items-center">
                  <i class="fa fa-star text-yellow-400"></i>
                  <span class="ml-1 text-gray-600">4.9</span>
                </div>
              </div>
              <p class="text-sm text-gray-600 mb-4">
                蝴蝶兰（学名：Phalaenopsis aphrodite）是一种常见的观赏兰花，因其花朵形似蝴蝶而得名。
              </p>
              <div class="flex justify-between items-center">
                <div class="flex items-center">
                  <span class="text-xs text-gray-500 mr-2">难度：</span>
                  <div class="flex">
                    <i class="fa fa-circle text-green-500 text-xs"></i>
                    <i class="fa fa-circle text-green-500 text-xs"></i>
                    <i class="fa fa-circle text-green-500 text-xs"></i>
                    <i class="fa fa-circle text-green-500 text-xs"></i>
                    <i class="fa fa-circle text-gray-300 text-xs"></i>
                  </div>
                </div>
                <button class="text-primary hover:text-dark transition-colors">
                  <i class="fa fa-bookmark-o"></i>
                </button>
              </div>
            </div>
          </div>
          
          <!-- 植物卡片4 -->
          <div class="bg-white rounded-xl overflow-hidden shadow-lg hover-scale card-shadow">
            <div class="relative">
              <img src="https://picsum.photos/id/113/400/300" alt="薄荷" class="w-full h-48 object-cover">
              <div class="absolute top-3 right-3 bg-dark/90 text-white px-2 py-1 rounded-md text-sm font-medium">
                香草植物
              </div>
            </div>
            <div class="p-5">
              <div class="flex justify-between items-start mb-3">
                <h3 class="text-xl font-bold text-gray-800">薄荷</h3>
                <div class="flex items-center">
                  <i class="fa fa-star text-yellow-400"></i>
                  <span class="ml-1 text-gray-600">4.6</span>
                </div>
              </div>
              <p class="text-sm text-gray-600 mb-4">
                薄荷（学名：Mentha haplocalyx）是一种常见的香草植物，具有清凉的气味和药用价值。
              </p>
              <div class="flex justify-between items-center">
                <div class="flex items-center">
                  <span class="text-xs text-gray-500 mr-2">难度：</span>
                  <div class="flex">
                    <i class="fa fa-circle text-green-500 text-xs"></i>
                    <i class="fa fa-circle text-green-500 text-xs"></i>
                    <i class="fa fa-circle text-gray-300 text-xs"></i>
                    <i class="fa fa-circle text-gray-300 text-xs"></i>
                    <i class="fa fa-circle text-gray-300 text-xs"></i>
                  </div>
                </div>
                <button class="text-primary hover:text-dark transition-colors">
                  <i class="fa fa-bookmark-o"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
        
        <div class="text-center mt-12">
          <button class="px-8 py-3 bg-white border border-primary text-primary rounded-full hover:bg-primary/5 transition-all shadow-md hover:shadow-lg">
            查看更多植物 <i class="fa fa-arrow-right ml-2"></i>
          </button>
        </div>
      </div>
    </section>

    <!-- AI模拟区域 -->
    <section id="ai-simulation" class="py-16 bg-gray-50">
      <div class="container mx-auto px-4">
        <div class="flex flex-col lg:flex-row items-center gap-12">
          <div class="lg:w-1/2 fade-in">
            <div class="bg-white rounded-2xl p-6 shadow-xl">
              <h3 class="text-xl font-bold text-gray-800 mb-6">AI植物生长模拟</h3>
              
              <div class="mb-6">
                <h4 class="text-lg font-semibold text-gray-800 mb-3">选择植物</h4>
                <div class="grid grid-cols-3 gap-3">
                  <button class="flex flex-col items-center justify-center p-3 border border-primary bg-primary/5 rounded-lg text-primary">
                    <i class="fa fa-leaf text-xl mb-2"></i>
                    <span class="text-sm">绿萝</span>
                  </button>
                  <button class="flex flex-col items-center justify-center p-3 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors">
                    <i class="fa fa-leaf text-xl mb-2 text-gray-500"></i>
                    <span class="text-sm text-gray-600">多肉植物</span>
                  </button>
                  <button class="flex flex-col items-center justify-center p-3 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors">
                    <i class="fa fa-leaf text-xl mb-2 text-gray-500"></i>
                    <span class="text-sm text-gray-600">蝴蝶兰</span>
                  </button>
                </div>
              </div>
              
              <div class="mb-6">
                <h4 class="text-lg font-semibold text-gray-800 mb-3">设置环境参数</h4>
                
                <div class="space-y-4">
                  <div>
                    <div class="flex justify-between mb-1">
                      <label class="text-sm text-gray-600">温度 (°C)</label>
                      <span class="text-sm font-medium text-gray-800">25°C</span>
                    </div>
                    <input type="range" min="10" max="35" value="25" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-primary">
                  </div>
                  
                  <div>
                    <div class="flex justify-between mb-1">
                      <label class="text-sm text-gray-600">湿度 (%)</label>
                      <span class="text-sm font-medium text-gray-800">60%</span>
                    </div>
                    <input type="range" min="20" max="90" value="60" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-primary">
                  </div>
                  
                  <div>
                    <div class="flex justify-between mb-1">
                      <label class="text-sm text-gray-600">光照强度</label>
                      <span class="text-sm font-medium text-gray-800">中等</span>
                    </div>
                    <input type="range" min="1" max="5" value="3" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-primary">
                  </div>
                </div>
              </div>
              
              <div class="mb-6">
                <h4 class="text-lg font-semibold text-gray-800 mb-3">模拟时长</h4>
                <div class="grid grid-cols-4 gap-3">
                  <button class="px-3 py-2 bg-primary/10 text-primary rounded-lg hover:bg-primary/20 transition-colors">1周</button>
                  <button class="px-3 py-2 bg-primary/10 text-primary rounded-lg hover:bg-primary/20 transition-colors">1个月</button>
                  <button class="px-3 py-2 bg-primary/10 text-primary rounded-lg hover:bg-primary/20 transition-colors">3个月</button>
                  <button class="px-3 py-2 bg-gray-100 text-gray-600 rounded-lg hover:bg-gray-200 transition-colors">自定义</button>
                </div>
              </div>
              
              <button class="w-full py-3 bg-primary text-white rounded-lg hover:bg-dark transition-colors">
                <i class="fa fa-play mr-2"></i>开始模拟
              </button>
            </div>
          </div>
          
          <div class="lg:w-1/2 fade-in" style="animation-delay: 0.2s;">
            <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-gray-800 mb-6">
              AI技术，<span class="text-primary">预测植物生长</span>
            </h2>
            <p class="text-gray-600 mb-8">
              花想容的AI植物模拟系统基于大数据和机器学习技术，能够根据环境参数和植物特性，预测植物的生长状态和健康状况，帮助您更好地照顾植物。
            </p>
            
            <div class="space-y-6 mb-8">
              <div class="flex items-start space-x-4">
                <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary flex-shrink-0 mt-1">
                  <i class="fa fa-line-chart"></i>
                </div>
                <div>
                  <h4 class="text-lg font-semibold text-gray-800 mb-2">生长趋势预测</h4>
                  <p class="text-gray-600">
                    基于植物种类和环境参数，预测植物在未来一段时间内的生长趋势和形态变化。
                  </p>
                </div>
              </div>
              
              <div class="flex items-start space-x-4">
                <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary flex-shrink-0 mt-1">
                  <i class="fa fa-exclamation-triangle"></i>
                </div>
                <div>
                  <h4 class="text-lg font-semibold text-gray-800 mb-2">健康状况预警</h4>
                  <p class="text-gray-600">
                    实时监测植物健康状况，提前预警可能出现的问题，如病虫害、营养缺乏等。
                  </p>
                </div>
              </div>
              
              <div class="flex items-start space-x-4">
                <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary flex-shrink-0 mt-1">
                  <i class="fa fa-lightbulb-o"></i>
                </div>
                <div>
                  <h4 class="text-lg font-semibold text-gray-800 mb-2">智能养护建议</h4>
                  <p class="text-gray-600">
                    根据模拟结果，提供个性化的养护建议，包括浇水、施肥、修剪等方面的指导。
                  </p>
                </div>
              </div>
            </div>
            
            <div class="bg-white rounded-xl p-6 shadow-lg">
              <h4 class="text-lg font-semibold text-gray-800 mb-4">模拟结果示例</h4>
              <div class="h-64">
                <canvas id="growthChart"></canvas>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 论坛区域 -->
    <section id="forum" class="py-16 bg-white">
      <div class="container mx-auto px-4">
        <div class="text-center mb-16">
          <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-gray-800 mb-4">
            加入<span class="text-primary">植物爱好者社区</span>
          </h2>
          <p class="text-gray-600 max-w-2xl mx-auto">
            在这里，您可以与全球植物爱好者交流经验，分享养护心得，参与讨论，解决植物问题，共同成长。
          </p>
        </div>
        
        <div class="flex flex-col lg:flex-row gap-8">
          <!-- 热门讨论 -->
          <div class="lg:w-2/3">
            <div class="bg-white rounded-xl shadow-lg p-6 mb-8">
              <div class="flex justify-between items-center mb-6">
                <h3 class="text-xl font-bold text-gray-800">热门讨论</h3>
                <button class="text-primary hover:text-dark transition-colors">
                  查看全部 <i class="fa fa-angle-right ml-1"></i>
                </button>
              </div>
              
              <div class="space-y-6">
                <!-- 讨论帖子1 -->
                <div class="p-4 border border-gray-100 rounded-xl hover:bg-gray-50 transition-colors">
                  <div class="flex items-start space-x-4">
                    <img src="https://picsum.photos/id/64/60/60" alt="用户头像" class="w-12 h-12 rounded-full object-cover">
                    <div class="flex-grow">
                      <div class="flex justify-between">
                        <div>
                          <h4 class="font-semibold text-gray-800">我的绿萝叶子发黄怎么办？</h4>
                          <p class="text-sm text-gray-500">发布于 2天前</p>
                        </div>
                        <div class="flex items-center space-x-4">
                          <span class="text-sm text-gray-500 flex items-center">
                            <i class="fa fa-eye mr-1"></i> 328
                          </span>
                          <span class="text-sm text-gray-500 flex items-center">
                            <i class="fa fa-comment mr-1"></i> 16
                          </span>
                        </div>
                      </div>
                      <p class="text-gray-600 mt-2 mb-3">
                        我的绿萝最近叶子开始发黄，不知道是什么原因。我每周浇一次水，放在室内光线明亮的地方，是不是浇水太多了？
                      </p>
                      <div class="flex flex-wrap gap-2">
                        <span class="px-2 py-1 bg-primary/10 text-primary text-xs rounded-full">绿萝</span>
                        <span class="px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded-full">养护问题</span>
                      </div>
                    </div>
                  </div>
                </div>
                
                <!-- 讨论帖子2 -->
                <div class="p-4 border border-gray-100 rounded-xl hover:bg-gray-50 transition-colors">
                  <div class="flex items-start space-x-4">
                    <img src="https://picsum.photos/id/65/60/60" alt="用户头像" class="w-12 h-12 rounded-full object-cover">
                    <div class="flex-grow">
                      <div class="flex justify-between">
                        <div>
                          <h4 class="font-semibold text-gray-800">分享我的多肉植物拼盘</h4>
                          <p class="text-sm text-gray-500">发布于 3天前</p>
                        </div>
                        <div class="flex items-center space-x-4">
                          <span class="text-sm text-gray-500 flex items-center">
                            <i class="fa fa-eye mr-1"></i> 512
                          </span>
                          <span class="text-sm text-gray-500 flex items-center">
                            <i class="fa fa-comment mr-1"></i> 24
                          </span>
                        </div>
                      </div>
                      <p class="text-gray-600 mt-2 mb-3">
                        花了一个周末时间，把我收集的多肉植物整理成了一个拼盘，分享给大家看看。有什么建议或意见欢迎留言！
                      </p>
                      <div class="grid grid-cols-3 gap-2 mb-3">
                        <img src="https://picsum.photos/id/110/200/200" alt="多肉拼盘" class="w-full h-24 object-cover rounded-lg">
                        <img src="https://picsum.photos/id/112/200/200" alt="多肉拼盘" class="w-full h-24 object-cover rounded-lg">
                        <img src="https://picsum.photos/id/113/200/200" alt="多肉拼盘" class="w-full h-24 object-cover rounded-lg">
                      </div>
                      <div class="flex flex-wrap gap-2">
                        <span class="px-2 py-1 bg-primary/10 text-primary text-xs rounded-full">多肉植物</span>
                        <span class="px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded-full">创意分享</span>
                      </div>
                    </div>
                  </div>
                </div>
                
                <!-- 讨论帖子3 -->
                <div class="p-4 border border-gray-100 rounded-xl hover:bg-gray-50 transition-colors">
                  <div class="flex items-start space-x-4">
                    <img src="https://picsum.photos/id/66/60/60" alt="用户头像" class="w-12 h-12 rounded-full object-cover">
                    <div class="flex-grow">
                      <div class="flex justify-between">
                        <div>
                          <h4 class="font-semibold text-gray-800">求推荐适合新手的室内植物</h4>
                          <p class="text-sm text-gray-500">发布于 5天前</p>
                        </div>
                        <div class="flex items-center space-x-4">
                          <span class="text-sm text-gray-500 flex items-center">
                            <i class="fa fa-eye mr-1"></i> 456
                          </span>
                          <span class="text-sm text-gray-500 flex items-center">
                            <i class="fa fa-comment mr-1"></i> 32
                          </span>
                        </div>
                      </div>
                      <p class="text-gray-600 mt-2 mb-3">
                        我是植物养护新手，想养一些室内植物，但不知道从哪些开始比较好。希望大家能推荐一些容易养护、适合室内环境的植物。
                      </p>
                      <div class="flex flex-wrap gap-2">
                        <span class="px-2 py-1 bg-primary/10 text-primary text-xs rounded-full">室内植物</span>
                        <span class="px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded-full">新手推荐</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              
              <div class="text-center mt-6">
                <button class="px-6 py-2 bg-white border border-primary text-primary rounded-lg hover:bg-primary/5 transition-colors">
                  加载更多讨论
                </button>
              </div>
            </div>
          </div>
          
          <!-- 侧边栏 -->
          <div class="lg:w-1/3">
            <!-- 发布帖子 -->
            <div class="bg-white rounded-xl shadow-lg p-6 mb-8">
              <h3 class="text-xl font-bold text-gray-800 mb-4">发布帖子</h3>
              <div class="space-y-4">
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1">帖子标题</label>
                  <input type="text" placeholder="请输入帖子标题" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary">
                </div>
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1">帖子内容</label>
                  <textarea rows="4" placeholder="请输入帖子内容" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary"></textarea>
                </div>
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1">选择分类</label>
                  <select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary">
                    <option>养护经验分享</option>
                    <option>植物问题求助</option>
                    <option>创意园艺</option>
                    <option>植物摄影</option>
                    <option>其他</option>
                  </select>
                </div>
                <button class="w-full py-2 bg-primary text-white rounded-lg hover:bg-dark transition-colors">
                  发布帖子
                </button>
              </div>
            </div>
            
            <!-- 活跃用户 -->
            <div class="bg-white rounded-xl shadow-lg p-6 mb-8">
              <div class="flex justify-between items-center mb-4">
                <h3 class="text-xl font-bold text-gray-800">活跃用户</h3>
                <button class="text-primary hover:text-dark transition-colors text-sm">
                  查看全部
                </button>
              </div>
              <div class="space-y-4">
                <div class="flex items-center space-x-3">
                  <img src="https://picsum.photos/id/64/60/60" alt="用户头像" class="w-10 h-10 rounded-full object-cover">
                  <div class="flex-grow">
                    <h4 class="font-medium text-gray-800">植物达人</h4>
                    <p class="text-xs text-gray-500">分享了 128 篇内容</p>
                  </div>
                  <button class="px-3 py-1 bg-primary/10 text-primary text-sm rounded-full hover:bg-primary/20 transition-colors">
                    关注
                  </button>
                </div>
                <div class="flex items-center space-x-3">
                  <img src="https://picsum.photos/id/65/60/60" alt="用户头像" class="w-10 h-10 rounded-full object-cover">
                  <div class="flex-grow">
                    <h4 class="font-medium text-gray-800">多肉控</h4>
                    <p class="text-xs text-gray-500">分享了 96 篇内容</p>
                  </div>
                  <button class="px-3 py-1 bg-primary/10 text-primary text-sm rounded-full hover:bg-primary/20 transition-colors">
                    关注
                  </button>
                </div>
                <div class="flex items-center space-x-3">
                  <img src="https://picsum.photos/id/66/60/60" alt="用户头像" class="w-10 h-10 rounded-full object-cover">
                  <div class="flex-grow">
                    <h4 class="font-medium text-gray-800">绿植爱好者</h4>
                    <p class="text-xs text-gray-500">分享了 72 篇内容</p>
                  </div>
                  <button class="px-3 py-1 bg-gray-100 text-gray-600 text-sm rounded-full hover:bg-gray-200 transition-colors">
                    已关注
                  </button>
                </div>
              </div>
            </div>
            
            <!-- 热门标签 -->
            <div class="bg-white rounded-xl shadow-lg p-6">
              <h3 class="text-xl font-bold text-gray-800 mb-4">热门标签</h3>
              <div class="flex flex-wrap gap-2">
                <span class="px-3 py-1 bg-primary/10 text-primary rounded-full">绿萝</span>
                <span class="px-3 py-1 bg-primary/10 text-primary rounded-full">多肉植物</span>
                <span class="px-3 py-1 bg-primary/10 text-primary rounded-full">蝴蝶兰</span>
                <span class="px-3 py-1 bg-primary/10 text-primary rounded-full">室内植物</span>
                <span class="px-3 py-1 bg-primary/10 text-primary rounded-full">养护经验</span>
                <span class="px-3 py-1 bg-primary/10 text-primary rounded-full">植物问题</span>
                <span class="px-3 py-1 bg-primary/10 text-primary rounded-full">创意园艺</span>
                <span class="px-3 py-1 bg-primary/10 text-primary rounded-full">植物摄影</span>
                <span class="px-3 py-1 bg-primary/10 text-primary rounded-full">新手入门</span>
                <span class="px-3 py-1 bg-primary/10 text-primary rounded-full">植物知识</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 商城区域 -->
    <section id="shop" class="py-16 bg-gray-50">
      <div class="container mx-auto px-4">
        <div class="text-center mb-16">
          <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-gray-800 mb-4">
            探索<span class="text-primary">植物商城</span>
          </h2>
          <p class="text-gray-600 max-w-2xl mx-auto">
            花想容商城提供各种合法植物和园艺用品，品质保证，价格合理，为您的植物养护之旅提供全方位支持。
          </p>
        </div>
        
        <!-- 商品网格 -->
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
          <!-- 商品1 -->
          <div class="bg-white rounded-xl overflow-hidden shadow-lg hover-scale card-shadow">
            <div class="relative">
              <img src="https://picsum.photos/id/106/400/300" alt="绿萝盆栽" class="w-full h-48 object-cover">
              <div class="absolute top-3 right-3 bg-secondary text-white px-2 py-1 rounded-md text-sm font-medium">
                热销
              </div>
            </div>
            <div class="p-5">
              <h3 class="text-xl font-bold text-gray-800 mb-2">绿萝盆栽</h3>
              <div class="flex items-center mb-3">
                <div class="flex">
                  <i class="fa fa-star text-yellow-400"></i>
                  <i class="fa fa-star text-yellow-400"></i>
                  <i class="fa fa-star text-yellow-400"></i>
                  <i class="fa fa-star text-yellow-400"></i>
                  <i class="fa fa-star-half-o text-yellow-400"></i>
                </div>
                <span class="ml-2 text-sm text-gray-500">4.5 (128)</span>
              </div>
              <p class="text-gray-600 mb-4">
                健康绿萝盆栽，带精美陶瓷花盆，净化空气，适合室内摆放。
              </p>
              <div class="flex justify-between items-center">
                <div>
                  <span class="text-xl font-bold text-primary">¥49.90</span>
                  <span class="text-sm text-gray-500 line-through ml-2">¥69.90</span>
                </div>
                <button class="w-10 h-10 bg-primary text-white rounded-full flex items-center justify-center hover:bg-dark transition-colors">
                  <i class="fa fa-shopping-cart"></i>
                </button>
              </div>
            </div>
          </div>
          
          <!-- 商品2 -->
          <div class="bg-white rounded-xl overflow-hidden shadow-lg hover-scale card-shadow">
            <div class="relative">
              <img src="https://picsum.photos/id/110/400/300" alt="多肉植物组合" class="w-full h-48 object-cover">
              <div class="absolute top-3 right-3 bg-accent text-white px-2 py-1 rounded-md text-sm font-medium">
                新品
              </div>
            </div>
            <div class="p-5">
              <h3 class="text-xl font-bold text-gray-800 mb-2">多肉植物组合</h3>
              <div class="flex items-center mb-3">
                <div class="flex">
                  <i class="fa fa-star text-yellow-400"></i>
                  <i class="fa fa-star text-yellow-400"></i>
                  <i class="fa fa-star text-yellow-400"></i>
                  <i class="fa fa-star text-yellow-400"></i>
                  <i class="fa fa-star-o text-yellow-400"></i>
                </div>
                <span class="ml-2 text-sm text-gray-500">4.0 (86)</span>
              </div>
              <p class="text-gray-600 mb-4">
                精选5种不同品种多肉植物组合，附带种植指导，适合新手。
              </p>
              <div class="flex justify-between items-center">
                <div>
                  <span class="text-xl font-bold text-primary">¥69.90</span>
                </div>
                <button class="w-10 h-10 bg-primary text-white rounded-full flex items-center justify-center hover:bg-dark transition-colors">
                  <i class="fa fa-shopping-cart"></i>
                </button>
              </div>
            </div>
          </div>
          
          <!-- 商品3 -->
          <div class="bg-white rounded-xl overflow-hidden shadow-lg hover-scale card-shadow">
            <div class="relative">
              <img src="https://picsum.photos/id/111/400/300" alt="蝴蝶兰盆栽" class="w-full h-48 object-cover">
            </div>
            <div class="p-5">
              <h3 class="text-xl font-bold text-gray-800 mb-2">蝴蝶兰盆栽</h3>
              <div class="flex items-center mb-3">
                <div class="flex">
                  <i class="fa fa-star text-yellow-400"></i>
                  <i class="fa fa-star text-yellow-400"></i>
                  <i class="fa fa-star text-yellow-400"></i>
                  <i class="fa fa-star text-yellow-400"></i>
                  <i class="fa fa-star text-yellow-400"></i>
                </div>
                <span class="ml-2 text-sm text-gray-500">5.0 (42)</span>
              </div>
              <p class="text-gray-600 mb-4">
                优质蝴蝶兰盆栽，带花，多种花色可选，优雅美观。
              </p>
              <div class="flex justify-between items-center">
                <div>
                  <span class="text-xl font-bold text-primary">¥99.90</span>
                  <span class="text-sm text-gray-500 line-through ml-2">¥129.90</span>
                </div>
                <button class="w-10 h-10 bg-primary text-white rounded-full flex items-center justify-center hover:bg-dark transition-colors">
                  <i class="fa fa-shopping-cart"></i>
                </button>
              </div>
            </div>
          </div>
          
          <!-- 商品4 -->
          <div class="bg-white rounded-xl overflow-hidden shadow-lg hover-scale card-shadow">
            <div class="relative">
              <img src="https://picsum.photos/id/112/400/300" alt="园艺工具套装" class="w-full h-48 object-cover">
              <div class="absolute top-3 right-3 bg-dark text-white px-2 py-1 rounded-md text-sm font-medium">
                特惠
              </div>
            </div>
            <div class="p-5">
              <h3 class="text-xl font-bold text-gray-800 mb-2">园艺工具套装</h3>
              <div class="flex items-center mb-3">
                <div class="flex">
                  <i class="fa fa-star text-yellow-400"></i>
                  <i class="fa fa-star text-yellow-400"></i>
                  <i class="fa fa-star text-yellow-400"></i>
                  <i class="fa fa-star text-yellow-400"></i>
                  <i class="fa fa-star-half-o text-yellow-400"></i>
                </div>
                <span class="ml-2 text-sm text-gray-500">4.7 (95)</span>
              </div>
              <p class="text-gray-600 mb-4">
                8件套园艺工具套装，包含铲子、剪刀、手套等，高品质耐用。
              </p>
              <div class="flex justify-between items-center">
                <div>
                  <span class="text-xl font-bold text-primary">¥79.90</span>
                  <span class="text-sm text-gray-500 line-through ml-2">¥119.90</span>
                </div>
                <button class="w-10 h-10 bg-primary text-white rounded-full flex items-center justify-center hover:bg-dark transition-colors">
                  <i class="fa fa-shopping-cart"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
        
        <div class="text-center mt-12">
          <button class="px-8 py-3 bg-white border border-primary text-primary rounded-full hover:bg-primary/5 transition-all shadow-md hover:shadow-lg">
            查看更多商品 <i class="fa fa-arrow-right ml-2"></i>
          </button>
        </div>
      </div>
    </section>

    <!-- 下载应用区域 -->
    <section class="py-20 bg-gradient-plant text-white">
      <div class="container mx-auto px-4">
        <div class="flex flex-col md:flex-row items-center justify-between">
          <div class="md:w-1/2 mb-10 md:mb-0 fade-in">
            <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-6">
              随时随地，<span class="text-shadow">探索植物世界</span>
            </h2>
            <p class="text-lg mb-8 opacity-90">
              下载花想容App，享受更便捷的植物识别、百科查询和社区交流体验，让您的植物养护之旅更加丰富多彩。
            </p>
            <div class="flex flex-wrap gap-4">
              <button class="flex items-center space-x-3 px-6 py-3 bg-white text-primary rounded-xl hover:bg-gray-100 transition-colors">
                <i class="fa fa-apple text-2xl"></i>
                <div class="text-left">
                  <div class="text-xs">下载</div>
                  <div class="font-semibold">App Store</div>
                </div>
              </button>
              <button class="flex items-center space-x-3 px-6 py-3 bg-white text-primary rounded-xl hover:bg-gray-100 transition-colors">
                <i class="fa fa-android text-2xl"></i>
                <div class="text-left">
                  <div class="text-xs">下载</div>
                  <div class="font-semibold">Google Play</div>
                </div>
              </button>
            </div>
          </div>
          <div class="md:w-1/3 fade-in" style="animation-delay: 0.2s;">
            <img src="https://picsum.photos/id/1/600/600" alt="手机应用截图" class="w-full h-auto rounded-3xl shadow-2xl hover-scale">
          </div>
        </div>
      </div>
    </section>

    <!-- 订阅区域 -->
    <section class="py-16 bg-white">
      <div class="container mx-auto px-4">
        <div class="max-w-3xl mx-auto text-center">
          <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-gray-800 mb-4">
            订阅我们的<span class="text-primary">植物资讯</span>
          </h2>
          <p class="text-gray-600 mb-8">
            订阅我们的电子邮件，获取最新的植物养护技巧、季节性指南和独家优惠信息。
          </p>
          <div class="flex flex-col sm:flex-row gap-4 max-w-xl mx-auto">
            <input type="email" placeholder="输入您的邮箱地址" class="flex-grow px-6 py-3 border border-gray-300 rounded-full focus:ring-2 focus:ring-primary focus:border-primary">
            <button class="px-8 py-3 bg-primary text-white rounded-full hover:bg-dark transition-all shadow-lg hover:shadow-xl hover:-translate-y-1 whitespace-nowrap">
              立即订阅
            </button>
          </div>
          <p class="text-sm text-gray-500 mt-4">
            我们尊重您的隐私，不会向第三方分享您的信息。
          </p>
        </div>
      </div>
    </section>
  </main>

  <!-- 页脚 -->
  <footer class="bg-gray-800 text-white pt-16 pb-8">
    <div class="container mx-auto px-4">
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
        <div>
          <div class="flex items-center space-x-2 mb-6">
            <div class="w-10 h-10 rounded-full bg-white flex items-center justify-center">
              <i class="fa fa-leaf text-primary text-xl"></i>
            </div>
            <span class="text-xl font-bold">花想容</span>
          </div>
          <p class="text-gray-400 mb-6">
            花想容是一个综合性的植物论坛平台，致力于为植物爱好者提供专业的植物识别、百科知识、AI模拟和社交交流功能。
          </p>
          <div class="flex space-x-4">
            <a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-primary transition-colors">
              <i class="fa fa-weixin"></i>
            </a>
            <a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-primary transition-colors">
              <i class="fa fa-weibo"></i>
            </a>
            <a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-primary transition-colors">
              <i class="fa fa-instagram"></i>
            </a>
            <a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-primary transition-colors">
              <i class="fa fa-youtube-play"></i>
            </a>
          </div>
        </div>
        
        <div>
          <h4 class="text-lg font-semibold mb-6">快速链接</h4>
          <ul class="space-y-3">
            <li><a href="#home" class="text-gray-400 hover:text-white transition-colors">首页</a></li>
            <li><a href="#plant-identify" class="text-gray-400 hover:text-white transition-colors">植物识别</a></li>
            <li><a href="#encyclopedia" class="text-gray-400 hover:text-white transition-colors">植物百科</a></li>
            <li><a href="#ai-simulation" class="text-gray-400 hover:text-white transition-colors">AI模拟</a></li>
            <li><a href="#forum" class="text-gray-400 hover:text-white transition-colors">交流论坛</a></li>
            <li><a href="#shop" class="text-gray-400 hover:text-white transition-colors">植物商城</a></li>
          </ul>
        </div>
        
        <div>
          <h4 class="text-lg font-semibold mb-6">帮助中心</h4>
          <ul class="space-y-3">
            <li><a href="#" class="text-gray-400 hover:text-white transition-colors">常见问题</a></li>
            <li><a href="#" class="text-gray-400 hover:text-white transition-colors">使用教程</a></li>
            <li><a href="#" class="text-gray-400 hover:text-white transition-colors">联系我们</a></li>
            <li><a href="#" class="text-gray-400 hover:text-white transition-colors">隐私政策</a></li>
            <li><a href="#" class="text-gray-400 hover:text-white transition-colors">服务条款</a></li>
          </ul>
        </div>
        
        <div>
          <h4 class="text-lg font-semibold mb-6">联系我们</h4>
          <ul class="space-y-3">
            <li class="flex items-start space-x-3">
              <i class="fa fa-map-marker mt-1 text-gray-400"></i>
              <span class="text-gray-400">北京市海淀区中关村南大街5号</span>
            </li>
            <li class="flex items-center space-x-3">
              <i class="fa fa-phone text-gray-400"></i>
              <span class="text-gray-400">400-123-4567</span>
            </li>
            <li class="flex items-center space-x-3">
              <i class="fa fa-envelope text-gray-400"></i>
              <span class="text-gray-400">contact@huaxiangrong.com</span>
            </li>
            <li class="flex items-center space-x-3">
              <i class="fa fa-clock-o text-gray-400"></i>
              <span class="text-gray-400">周一至周日 9:00-21:00</span>
            </li>
          </ul>
        </div>
      </div>
      
      <div class="border-t border-gray-700 pt-8 text-center text-gray-500 text-sm">
        <p>© 2023 花想容. 保留所有权利.</p>
      </div>
    </div>
  </footer>

  <!-- 返回顶部按钮 -->
  <button id="back-to-top" class="fixed bottom-6 right-6 w-12 h-12 bg-primary text-white rounded-full flex items-center justify-center shadow-lg opacity-0 invisible transition-all z-50 hover:bg-dark">
    <i class="fa fa-arrow-up"></i>
  </button>

  <!-- JavaScript -->
  <script>
    // 导航栏滚动效果
    const navbar = document.getElementById('navbar');
    const backToTop = document.getElementById('back-to-top');
    
    window.addEventListener('scroll', function() {
      if (window.scrollY > 100) {
        navbar.classList.add('bg-white', 'shadow-md');
        navbar.classList.remove('bg-transparent');
        
        backToTop.classList.remove('opacity-0', 'invisible');
        backToTop.classList.add('opacity-100', 'visible');
      } else {
        navbar.classList.remove('bg-white', 'shadow-md');
        navbar.classList.add('bg-transparent');
        
        backToTop.classList.add('opacity-0', 'invisible');
        backToTop.classList.remove('opacity-100', 'visible');
      }
    });
    
    // 返回顶部按钮
    backToTop.addEventListener('click', function() {
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      });
    });
    
    // 移动端菜单
    const mobileMenuButton = document.getElementById('mobile-menu-button');
    const mobileMenu = document.getElementById('mobile-menu');
    
    mobileMenuButton.addEventListener('click', function() {
      mobileMenu.classList.toggle('hidden');
    });
    
    // 植物生长模拟图表
    const ctx = document.getElementById('growthChart').getContext('2d');
    const growthChart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: ['第1周', '第2周', '第3周', '第4周', '第5周', '第6周', '第7周', '第8周'],
        datasets: [{
          label: '植物高度 (cm)',
          data: [5, 8, 12, 18, 24, 30, 35, 40],
          borderColor: '#4CAF50',
          backgroundColor: 'rgba(76, 175, 80, 0.1)',
          tension: 0.4,
          fill: true
        }, {
          label: '叶片数量',
          data: [2, 4, 6, 9, 12, 16, 20, 25],
          borderColor: '#FF9800',
          backgroundColor: 'rgba(255, 152, 0, 0.1)',
          tension: 0.4,
          fill: true
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          legend: {
            position: 'top',
          },
          tooltip: {
            mode: 'index',
            intersect: false,
          }
        },
        scales: {
          y: {
            beginAtZero: true,
            grid: {
              drawBorder: false,
            }
          },
          x: {
            grid: {
              display: false
            }
          }
        }
      }
    });
    
    // 平滑滚动到锚点
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
      anchor.addEventListener('click', function (e) {
        e.preventDefault();
        
        const targetId = this.getAttribute('href');
        if (targetId === '#') return;
        
        const targetElement = document.querySelector(targetId);
        if (targetElement) {
          targetElement.scrollIntoView({
            behavior: 'smooth'
          });
          
          // 关闭移动菜单
          if (!mobileMenu.classList.contains('hidden')) {
            mobileMenu.classList.add('hidden');
          }
        }
      });
    });
    
    // 图片加载动画
    document.addEventListener('DOMContentLoaded', function() {
      const images = document.querySelectorAll('img');
      images.forEach(img => {
        img.classList.add('opacity-0', 'transition-opacity', 'duration-500');
        img.addEventListener('load', function() {
          this.classList.remove('opacity-0');
        });
        if (img.complete) {
          img.classList.remove('opacity-0');
        }
      });
    });
  </script>


</body></html>